<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>用户列表</title>
</head>
<body>
	<form action="/index" method="post">
		<p>
			用户名： <input type="text" name="username" th:value="${username}">
			状态： <select name="enabled">
				<option value="">请选择</option>
				<option value="0" th:selected="${enabled==0}">禁用</option>
				<option value="1" th:selected="${enabled==1}">启用</option>
			</select> <input type="submit" value="查询">
		</p>
	</form>

	<table border="1">
		<tr>
			<th>用户ID</th>
			<th>用户名</th>
			<th>角色</th>
			<th>性别</th>
			<th>年龄</th>
			<th>邮箱</th>
			<th>状态</th>
			<th>是否锁定</th>
			<th>操作</th>
		</tr>
		<tr th:id="${user.uid}" th:each="user : ${users}">
			<td th:text="${user.uid}"></td>
			<td th:text="${user.username}"></td>
			<td><span th:each="role :${user.roles}" th:text="${role.nameZh} "></span></td>
			<td th:text="${user.sex==0} ? '男':'女'"></td>
			<td th:text="${user.age}"></td>
			<td th:text="${user.email}"></td>
			<td th:text="${user.enabled} ?'启用':'禁用'"></td>
			<td th:text="${user.locked} ?'锁定':'未锁定'"></td>
			<td>
				<input type="button" value="删除" th:name="${user.uid}"
					onclick="del(this)">
			</td>
		</tr>
	</table>
</body>
<script src="webjars/jquery/3.3.1/jquery.js" type="text/javascript"></script>
<script>
	function del(obj) {
		if(confirm("确认删除该用户吗？")){
			$.ajax({
				url : '/delete'
				,method: 'delete'
				,data : {'id': obj.name}
				,dataType: 'json'
				,success : function (res) {
					alert(res.msg);
					location.reload();
				}
			});
		}
	}
</script>
</html>